<template>
  <div>
    <work-template @submitOn="submitOn" @closeSelectedTag="closeSelectedTag" :butShow="isEdit">
      <div slot="form">
        <basics-info v-model="inspectDetail"/>

        <brand-info v-model="detailForm" :isEdit="isEdit" ref="brandInfo"/>

        <license-plate v-model="detailForm" :isEdit="isEdit" ref="licensePlate"/>


      </div>
    </work-template>


  </div>
</template>

<script>
import {
  getToken
} from "@/utils/auth";
import {
  getRegistration,
  addRegistration,
  updateRegistration,
  uploadDriverLicense
} from "@/api/cwgd/registrationApi.js";
import {
  getFindCarWorkOrderInfoVo,
} from "@/api/cwgd/maintenanceApi.js";
import {
  getWorkOrder, carBasic
} from "@/api/cwgd/cwgdApi.js";


import LinkageSelect from "../../components/linkageSelect";
import updataFile from "./updataFile.vue";
import citySelect from "../components/citySelect"

export default {
  dicts: ['work_order_type', 'online_offline'],
  name: "RegistrationDetails",
  components: {
    LinkageSelect,
    updataFile,
    citySelect,
    basicsInfo: () => import("../components/registration/basicsInfo.vue"),
    brandInfo: () => import("../components/registration/brandInfo.vue"),
    licensePlate: () => import("../components/registration/licensePlate.vue")
  },

  data() {
    return {
      showCity: false,
      options: [],
      citySelection: [],

      payTypeList: [{value: '1', label: '车管垫付，走报销，月结'}, {value: '2', label: '公对公'}],
      limitCity: [{value: 1, label: '是'}, {value: 2, label: '否'}],
      sumPrice: "",
      driveBookUrl: "",
      isForm: true,
      method: {},
      inspectDetail: {},
      // 表单参数
      detailForm: {
        carId: "",
        workId: '',
        businessDataId: "",

        checkCarPrice: "",
        registerPrice: "",
        photoMailPrice: "",
        isLimitCity: "",
        indexBelongCity: "",
        indexBelongCityId: "",
        indexType: "",
        payType: "",
        remark: "",
        carNo: "",
        licensePlateTime: "",
        registerUrl: "",
        driveBookUrl: "",
        sumPrice:0
      },

    };
  },
  watch: {},
  computed: {

    isShow() {

      return true

    },
    isEdit() {
      if (this.$route.query.type === 'view') {
        return false
      }

      if (this.$route.query.type === 'edit') {
        return true
      }


    },


  },
  created() {
    this.method = this.$route.query
    this.carBasic()
    let businessDataId = this.method.businessDataId || ''
    if (!businessDataId) { //  工单id为空
      // this.getWorkOrder()
    } else {

      this.getRegistration();
    }

  },
  mounted() {

  },
  methods: {
    carBasic() {
      getFindCarWorkOrderInfoVo(this.$route.query.id).then((res) => {
        this.inspectDetail = res.data
      })
    },








    closeSelectedTag(view) {
      this.$tab.closePage(view).then(({visitedViews}) => {
        // this.toLastView(visitedViews, view)
        this.$router.push({
          path: "/cwgd/registrationList",
        })
      })
    },

    // getWorkOrder() {
    //   getWorkOrder(this.method.id).then(res => {
    //     if (res.code == "200") {
    //       this.inspectDetail = res.data

    //     }
    //   });
    // },

    // 提交操作
    submitOn() {
      let a = this.$refs.brandInfo.handleEffect()
      let b = this.$refs.licensePlate.handleEffect()
      Promise.all([a, b]).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.detailForm.carId = this.method.carId
        this.detailForm.workId = this.method.id
        this.detailForm.workOrderStatus = "2"
        addRegistration(this.detailForm).then((res) => {
          if (res.code === 200) {
            loading.close();
            this.closeSelectedTag(this.$route)
          }
        }).catch(() => {
          loading.close();
        })
      }).catch(() => {

      })


    },

    // 详情回显
    async getRegistration() {
      try {
        const res = await getRegistration(this.$route.query.businessDataId)
        const resD = await getFindCarWorkOrderInfoVo(this.$route.query.id)
        this.detailForm = {...res.data, ...resD.data}
      } catch (e) {
        console.error(e)
      } finally {
        this.isForm = true
      }

    }
  }
};
</script>


<style lang="scss" scoped>
.el-form {
  ::v-deep.el-form-item {
    display: flex;
    align-items: center;
  }

  ::v-deep.el-form-item__content {
    line-height: normal;
    flex: 1;
    margin-left: 0 !important;

  }

  ::v-deep.el-form-item__label {
    line-height: normal;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #464646;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;

  ::v-deep .el-card__header {
    padding: 0;
    height: 48px;
    margin: 0 14px;
    display: flex;
    align-items: center;

    .header-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;

      .header-card-title {
        font-size: 16px;
        color: #333333;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
      }
    }
  }

  ::v-deep .el-card__body {
    padding: 10px 14px;

  }

  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 130px;
      text-align: right;
      font-size: 14px;
    }

    .inp-name-r {
      flex: 1;
    }
  }

  .top-card {
    display: flex;

    .top-card-right {
      flex: 1;
      font-size: 14px;
      line-height: 36px;
      margin-left: 20px;
    }
  }
}

</style>
